<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path;
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>课程列表</title>
</head>
<body id="kcbBody">
	<jsp:include page="/WEB-INF/page/common/_header.jsp" />
	<div class="kcb-top bgfff clearfix">
			<div class="kcb-top-item">
				<span class="kcb-top-text" id="cityText">城市</span>
				<div class="kcb-titleWrap-down kcb-titleWrap-cityList">
					<ul class="clearfix" id="cityBox">
						
					</ul>
				</div>
			</div>
			
			<div class="kcb-top-item">
				<span class="kcb-top-text" id="courseTypeText">项目</span>
				<div class="kcb-titleWrap-down kcb-titleWrap-cityList">
					<ul class="clearfix" id="courseTypeBox">
						
					</ul>
				</div>
			</div>
		</div>
		<div class="mask"></div>
		<div class="pic-list pb150 mt90" id="pic-list">
			<ul class="clearfix" id="pic-list-items" data-no="0">
				
			</ul>
			<script id="table-template" type="text/x-handlebars-template">
			  {{#if results}}
 			  {{#each results}}	
				<li class="clearfix">
					<a href="<%=basePath%>/course/detail/{{id}}">
						<div class="pic-list-l">
							<img src="{{courseImgFormat courseImg }}">
						</div>
						<div class="pic-list-r">
							<p class="pic-list-title">
								{{courseName}}
							</p>
							<p class="pic-list-priceWrap clearfix">
								<span class="pic-list-stateTip">进行中</span>
								<span class="pic-list-price">￥<span>{{currentPrice}}</span></span>
								
							</p>
							<div class="pic-list-rb clearfix">
								<div class="pic-list-time">
									<i class="fa fa-futbol-o" style="font-size: 140%;"></i>  {{courseTypeFormat courseType}}
								</div>
								<div class="pic-list-position">
									<i class="fa fa-street-view" style="font-size: 150%;"></i>  {{cityFormat city}}
								</div>
							</div>
						</div>
						
						<div class="pic-list-describe">
							<p class="pic-list-describe-line1">{{courseDesc}}</p>
							<p class="pic-list-describe-line2">查看详情 》</p>
						</div>
					</a>
				</li>
			  {{/each}}
			  {{else}}
				<div style="text-align: center;padding-top: 35px;">亲，暂无课程哦</div>
			  {{/if}}
			</script>
			
			<div class="loader" style="padding: 20px 0 10px 25%;">
	 		</div>
		</div>
		<jsp:include page="/WEB-INF/page/common/_footer.jsp"></jsp:include>
	<script type="text/javascript">
		loadItem(false);
	    initDictData("city","cityBox");
	    initDictData("course_type", "courseTypeBox");
	    $(window).scroll(function(){
		  var listObj = $("#pic-list");
		  if(listObj.hasClass("list-null")>0){
				return false;
		  }
		  if ($(window).scrollTop() + $(window).height() + 10 >= $(document).height() && $(window).scrollTop() > 20) {
			  loadItem(false);
           }
         }).trigger("scroll");
		$(".kcb-top-text").click(function(){
			var obj = $(this);
			var objWrap = obj.parent();
			if(obj.hasClass("on")){
				obj.removeClass("on");
				objWrap.find(".kcb-titleWrap-down").hide();
				$(".mask").hide();
			}else{
				objWrap.siblings().find(".kcb-titleWrap-down").hide()
				       .end().find(".kcb-top-text").removeClass("on");
				objWrap.find(".kcb-titleWrap-down").show();
				obj.addClass("on");
				$(".mask").show();
			}
		});
		
		$(".kcb-titleWrap-cityList li,.kcb-titleWrap-area li").click(function(){
			var obj = $(this);
			var objParentWrap = obj.closest(".kcb-top-item");
			obj.addClass("on").siblings().removeClass("on");
			objParentWrap.find(".kcb-top-text").removeClass("on").text(obj.text());
			$(objParentWrap.find(".kcb-top-text")[0]).attr("data-id",$(obj.find('span')[0]).attr("data-id"));
			objParentWrap.find(".kcb-titleWrap-down").hide();
			$(".mask").hide();
			loadItem(true);
		});
		
		function loadItem(reload) {
			var pageNo = parseInt($("#pic-list-items").attr("data-no")) + 1;
			if(reload) pageNo = 1;
			var courseType = $("#courseTypeText").attr("data-id");
			var city = $("#cityText").attr("data-id");
			var listObj = $("#pic-list");
			$.ajax({
			    type: 'post',
			    url: '<%=basePath %>/course/list/query',
			    data: {
			    	page: pageNo,
			    	courseType: courseType,
			    	city: city
			    },
			    dataType: 'json',
			    cache:false,
			    success: function(data) {
			    	var myTemplate = Handlebars.compile($("#table-template").html());
			    	
			        Handlebars.registerHelper("courseTypeFormat", function(val) {
			    		return dictDataFormat("course_type", val);
			    	});
			        
			        Handlebars.registerHelper("cityFormat", function(val) {
			    		return dictDataFormat("city", val);
			    	});
			        
			        Handlebars.registerHelper("equal", function(v1,v2,options) {
			    		if(v1 == v2) {
			    			//满足添加继续执行
			    			return options.fn(this);
			    		}else {
			    			//不满足条件执行{{else}}部分
			    			return options.inverse(this);
			    		}
			    	});
			        
			        Handlebars.registerHelper("plusFormat", function(v1, v2) {
			    		return parseInt(v1) * parseInt(v2);
			    	});
			        
			        Handlebars.registerHelper("courseImgFormat", function(val) {
			        	if(val) {
			        		return imgUrl + val;
			        	}else {
			        		return "<%=basePath %>/images/test/test1.jpg";
			        	}
			        });
			        if(data.results && data.results.length > 0) {
			        	
			        }
			        if(reload) {
			        	$('#pic-list-items').html(myTemplate(data));
			        }else {
			        	$('#pic-list-items').append(myTemplate(data));
			        }
		        	if(data.results && data.results.length > 0) {
			        	if(pageNo == data.totalPage) {
			        		listObj.addClass("list-null").find(".loader").show().html('<p>以上是全部课程了~</p>');
			        	}else {
			        		$("#pic-list-items").attr("data-no", pageNo);
			        	}
			        }else {
		        		if(pageNo == 1) return;
			        	listObj.addClass("list-null").find(".loader").show().html('<p>以上是全部课程了~</p>');
			        }
			    },
			    error:function(){
                	alert("系统异常，请稍后再试！");
                },
			    complete:function(){
                	if(!listObj.hasClass("list-null")){
                		listObj.find(".loader").hide();
                	}
                }
			});
		}
		
		function initDictData(dictCode, id) {
			$.ajax({
				url : basePath + "/dict/json/dictData/dictCode",
				type : 'POST',
				data : {
					dictCode: dictCode
				},
				async:false,
				error : function() {
					alert('系统异常');
				},
				success : function(data) {
					var html = "";
					for(var i = 0; i < data.length; i++) {
						html += "<li><span data-id='" + data[i].dictDataKey+ "'>" + data[i].dictDataValue + "</span></li>";
					}
					$("#" + id).html(html);
				}
			});
		}
	</script>
	<jsp:include page="/WEB-INF/page/common/_footer.jsp" />
</body>
</html>